<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>Calendar</title>
        <h:outputStylesheet library="css" name="main.css"  /> 
    </h:head>
    <h:body>
        <div id="container">
            <ui:include src="logo.xhtml" />
            <div id="actionMenu">
                <h:form>
                    <p:commandButton value="Notifications #{notificationsBean.getNotificationsCount()}" 
                                     id="openNotifButton"/>
                    <p:overlayPanel id="Notifications" for="openNotifButton" hideEffect="fade" dynamic="true" style="width:600px">
                        <c:set var="notifications" value="#{notificationsBean.getInvitations()}" scope="request" />


                        <c:forEach var="wa" items="#{notificationsBean.getWeatherAlerts()}" varStatus="status">
                            <div class="notification" id="notificationsMenu">
                                <p><b>Bad weather</b> detected for <em><b>#{wa.getEvent().getTitle()}</b></em>
                                    on #{notificationsBean.formatDate(wa.getEvent().getStartDate())}</p>
                                <c:if test="#{wa.getAlternativeDate() != null}" >
                                    <p>The closest sunny day is <b>#{notificationsBean.formatDate(wa.getAlternativeDate())}</b></p>
                                </c:if>
                                <h:form>
                                    <p:commandLink value="Dismiss notification" class="declineButton"
                                                   action="#{notificationsBean.markAsViewedWeatherAlert(wa)}"/>
                                    <c:if test="#{wa.getEvent().getOwner() == calendarBean.getLoggedUser()}" >
                                        <p:commandLink value="Reschedule Event" class="acceptButton"
                                                   action="#{notificationsBean.openEventForRescheduling(wa)}"/>
                                    </c:if>
                                </h:form>
                            </div>
                        </c:forEach>


                        <c:forEach var="notif" items="#{notificationsBean.getInvitations()}" varStatus="status">
                            <div class="notification" id="notificationsMenu">
                                <p><b>#{notif.getEvent().getCalendar().getOwner().getFullName()}</b>
                                    invited you to the event <em><b>#{notif.getEvent().getTitle()}</b></em>
                                    on <b>#{notificationsBean.formatDate(notif.getEvent().getStartDate())}</b></p>
                                <h:form>
                                    <p:commandLink value="Accept" class="acceptButton"
                                                   action="#{notificationsBean.acceptInvitation(notif)}"/>
                                    <p:commandLink value="Decline" class="declineButton"
                                                   action="#{notificationsBean.declineInvitation(notif)}"/>
                                </h:form>
                            </div>
                        </c:forEach>
                        <c:if test="#{notificationsBean.getInvitations().isEmpty() and notificationsBean.getWeatherAlerts().isEmpty()}">
                            <p>No new notifications for now.</p>
                        </c:if>
                    </p:overlayPanel>
                    <p:button value="Settings" outcome="settings" />             
                    <p:commandButton action="#{loginBean.logout()}" value="Logout" />

                    <p:autoComplete value="#{calendarBean.searchedUser}" 
                                    completeMethod="#{userSearchBean.completeUserSearch}" 
                                    var="user1"
                                    itemLabel="#{user1.getFullName()}"
                                    itemValue="#{user1}" 
                                    converter="inviteeConverter"
                                    forceSelection="true"
                                    placeholder="Search for Users">
                        <p:ajax event="itemSelect" listener="#{userSearchBean.onUserSelect}" />
                    </p:autoComplete>


                </h:form>
            </div>





            <h:form id="eventForm">
                <p:growl id="messages" showDetail="true" />

                <h:panelGrid columnClasses="value">
                    <p:schedule id="schedule" value="#{calendarBean.scheduleModel}" widgetVar="myschedule" timeZone="GMT+1">

                        <p:ajax event="dateSelect" listener="#{calendarBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();activateGeocomplete();" />
                        <p:ajax event="eventSelect" listener="#{calendarBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();activateGeocomplete();" />
                        <p:ajax event="eventMove" listener="#{calendarBean.onEventMove}" update="messages" />
                        <p:ajax event="eventResize" listener="#{calendarBean.onEventResize}" update="messages" />

                    </p:schedule>
                </h:panelGrid>

                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip" position="center top">
                    <h:panelGrid id="eventDetails" columns="2">

                        <p:column>
                            <h:outputLabel class="eventDialogLabel" for="title" value="Title:" />
                        </p:column>
                        <p:column>
                            <p:inputText id="title" value="#{calendarBean.event.title}" rendered="#{calendarBean.event.isEditable()}" />
                            <h:outputText id="titleNE" value="#{calendarBean.event.title} (by #{calendarBean.event.getOwner().getFullName()})" rendered="#{!calendarBean.event.isEditable()}" />
                        </p:column>


                        <p:column>
                            <h:outputLabel class="eventDialogLabel" for="from" value="From*:" />
                        </p:column>
                        <p:column>
                            <p:calendar id="from" value="#{calendarBean.event.startDate}" pattern="dd/MM/yyyy HH:mm:ss"
                                        disabled="#{!calendarBean.event.isEditable()}">                                  
                                <p:ajax event="dateSelect" update="carousel messages" listener="#{calendarBean.handleStartDateSelect}" />
                            </p:calendar>
                        </p:column>

                        <p:column>
                            <h:outputLabel class="eventDialogLabel" for="to" value="To*:" />
                        </p:column>
                        <p:column>
                            <p:calendar id="to" value="#{calendarBean.event.endDate}" pattern="dd/MM/yyyy HH:mm:ss" 
                                        disabled="#{!calendarBean.event.isEditable()}"> 
                                <p:ajax event="dateSelect" update="messages" listener="#{calendarBean.handleEndDateSelect}" />
                            </p:calendar>
                        </p:column>

                        <p:column>
                            <h:outputLabel class="eventDialogLabel" for="geocomplete" value="Location:" />
                        </p:column>
                        <p:column>
                            <p:inputText id="geocomplete" class="geocomplete" value="#{calendarBean.event.location.description}" 
                                         rendered="#{calendarBean.event.isEditable()}">
                                <p:ajax event="blur" update="carousel" listener="#{calendarBean.handleGeocomplete()}" />
                            </p:inputText>
                            <h:outputText value="#{calendarBean.event.location.description}" 
                                          rendered="#{!calendarBean.event.isEditable() and !calendarBean.event.location.description.isEmpty()}" />
                            <h:outputText value="No location provided" 
                                          rendered="#{!calendarBean.event.isEditable() and calendarBean.event.location.description.isEmpty()}" />
                        </p:column>

                        <p:column>
                            <h:outputLabel class="eventDialogLabel" for="outdoor" value="Outdoor:" />
                        </p:column>
                        <p:column>
                            <p:selectBooleanCheckbox id="outdoor" value="#{calendarBean.event.outdoor}" disabled="#{!calendarBean.event.isEditable()}" >
                                <p:ajax event="change" update="carousel messages" listener="#{calendarBean.handleOutdoor()}" />
                            </p:selectBooleanCheckbox >
                        </p:column>

                        <p:column>
                            <h:outputLabel class="eventDialogLabel" for="publicEvent" value="Public:" />
                        </p:column>
                        <p:column>
                            <p:selectBooleanCheckbox id="publicEvent" value="#{calendarBean.event.publicEvent}" disabled="#{!calendarBean.event.isEditable()}" />
                        </p:column>

                        <p:column>
                            <h:outputLabel class="eventDialogLabel" value="Invitees:" for="invitee" />
                        </p:column>
                        <p:column>
                            <p:autoComplete id="invitee" multiple="true" value="#{calendarBean.invitees}" completeMethod="#{calendarBean.completeInvitee}"
                                            var="user" itemLabel="#{calendarBean.autoCompleteItemLabelForUser(user)}" 
                                            itemValue="#{user}" converter="inviteeConverter" forceSelection="true" immediate="true"
                                            disabled="#{!calendarBean.event.isEditable()}" 
                                            placeholder="Search for Users (name, surname, email, city, ...)">
                                <p:column>
                                    <h:outputText value="#{user.getFullName()}" />
                                </p:column>
                                <p:ajax event="itemSelect" listener="#{calendarBean.selectInviteeListener}" />
                                <p:ajax event="itemUnselect" listener="#{calendarBean.unselectInviteeListener}" />
                            </p:autoComplete>
                        </p:column>

                        <p:row>
                            <p:column colspan="2">
                                <p:inputText id="lat" class="latitude" value="#{calendarBean.event.location.latitude}" type="hidden" />
                                <p:inputText id="lng" class="longitude" value="#{calendarBean.event.location.longitude}" type="hidden" />
                                <p:inputText id="placeid" class="place_id" value="#{calendarBean.event.location.placeIdentifier}" type="hidden" />   
                                <p:remoteCommand name="rc" update="carousel messages" actionListener="#{calendarBean.handleLocationSelection()}" />
                            </p:column>
                        </p:row>         

                        <p:row>
                            <p:column colspan="2">
                                <h:panelGrid id="carousel">
                                    <p:carousel id="display" rendered="#{calendarBean.shouldRenderCarousel()}" 
                                                value="#{calendarBean.getDailyForecast()}" 
                                                var="day" 
                                                headerText="Weather Forecast">
                                        <h:panelGrid columns="1" cellpadding="5" columnClasses="label,value">
                                            <h:outputText value="#{calendarBean.dateStringForDay(day)}" styleClass="date"/>
                                            <f:facet name="header">
                                                <img src="#{calendarBean.iconForDay(day)}" />
                                            </f:facet>
                                            <h:outputText 
                                                value="#{calendarBean.formatTemperature(day.temperatureMin())}&deg; /
                                                #{calendarBean.formatTemperature(day.temperatureMax())}&deg;"
                                                styleClass="temperature" />
                                        </h:panelGrid>
                                    </p:carousel>
                                </h:panelGrid>
                            </p:column>
                        </p:row>
                        <p:row/>
                        <p:row>
                            <p:column colspan="2" rendered="#{calendarBean.event.isEditable()}">
                                <p:commandButton id="addButton" value="Save" styleClass="ui-priority-primary" style="float:right;" actionListener="#{calendarBean.addEvent}" update="messages" />
                            </p:column>
                            <p:column colspan="2" rendered="#{calendarBean.event.isEditable()}">
                                <p:commandButton id="deleteButton" value="Delete" styleClass="ui-priority-danger" icon="ui-icon-trash" style="float:right;" actionListener="#{calendarBean.deleteEvent}" update="messages" />
                            </p:column>
                            <p:column colspan="2" rendered="#{!calendarBean.event.isEditable()}">
                                <p:commandButton id="decline" value="Decline invitation" styleClass="ui-priority-danger" icon="ui-icon-trash" style="float:right;" 
                                                 action="#{notificationsBean.declineInvitationForEvent(calendarBean.event)}" />
                            </p:column>
                        </p:row>
                    </h:panelGrid>
                </p:dialog>    
            </h:form>
        </div>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
        <script src="/calendar/resources/js/jquery.geocomplete.min.js" />
        <script>
            function activateGeocomplete() {
                $(".geocomplete").geocomplete().bind("geocode:result", function (event, result) {
                    $(".latitude").val(result.geometry.location.lat());
                    $(".longitude").val(result.geometry.location.lng());
                    $(".place_id").val(result["place_id"]);
                    rc();
                });
            }

            function resetGeocomplete() {
                $(".geocomplete").val('');
            }
        </script>
    </h:body>
</html>

